Step 2 of 3: Adding Content to the Control

In the previous step you created a WPF application or a Silverlight application and added the C1DropDown control to your project. In this step you'll add content to the C1DropDown control. To customize your project and add content to the C1DropDown control in your application, complete the following steps:

Switch to XAML view. In the next steps you’ll add XAML markup to your application to add content to the drop-down box.
Add markup to the C1DropDown control so that it appears similar to the following:

XAML	Copy Code
<c1:C1DropDown Name="C1DropDown1" Height="30" Width="100"> <c1:C1DropDown.Header> <ContentControl VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"> <TextBlock x:Name="selection" Text="« Pick one »" FontSize="12" Foreground="#FF3B76A2" TextAlignment="left" /> </ContentControl> </c1:C1DropDown.Header> </c1:C1DropDown>

XAML

Copy Code

<c1:C1DropDown Name="C1DropDown1" Height="30" Width="100">
    <c1:C1DropDown.Header>
        <ContentControl VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0">
            <TextBlock x:Name="selection" Text="« Pick one »" FontSize="12" Foreground="#FF3B76A2" TextAlignment="left" />
        </ContentControl>
    </c1:C1DropDown.Header>
</c1:C1DropDown>

Add the following markup just after the </c1:C1DropDown.Header> tag in the XAML markup you just added:

XAML	Copy Code
<c1:C1DropDown.Content> <TreeView x:Name="treeSelection" Background="Transparent" Margin="10"> <TreeViewItem Header="South America"> <TreeViewItem Header="Brazil" /> <TreeViewItem Header="Argentina" /> <TreeViewItem Header="Uruguay" /> </TreeViewItem> <TreeViewItem Header="Europe"> <TreeViewItem Header="Italy" /> <TreeViewItem Header="France" /> <TreeViewItem Header="England" /> <TreeViewItem Header="Germany" /> </TreeViewItem> </TreeView> </c1:C1DropDown.Content>

XAML

Copy Code

<c1:C1DropDown.Content>
    <TreeView x:Name="treeSelection" Background="Transparent" Margin="10">
        <TreeViewItem Header="South America">
            <TreeViewItem Header="Brazil" />
            <TreeViewItem Header="Argentina" />
            <TreeViewItem Header="Uruguay" />
        </TreeViewItem>
        <TreeViewItem Header="Europe">
            <TreeViewItem Header="Italy" />
            <TreeViewItem Header="France" />
            <TreeViewItem Header="England" />
            <TreeViewItem Header="Germany" />
        </TreeViewItem>
    </TreeView>
</c1:C1DropDown.Content>

This will add a standard TreeView control to the C1DropDown control’s content area. Note that the Window should appear similar to the following image in Design view:

In this step you added content to the C1DropDown control. In the next step you'll further customize the control and run the application to observe run-time interactions.